<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 200px;
            border: 1px solid red;

            /* 
            径向渐变
            1.简单的，指定渐变的颜色就可以
            2.指定渐变色的起始位置，在颜色后面 空格 具体数值
            3.自定义转换中心点，过度
            4.给色变指定多个位置
            5.指定渐变的形状 圆形circle 椭圆ellipse
            6.指定径向渐变中心点位置 默认中心点为元素中心
              指定位置的方式和我们控制背景图片的位置方式一样
              固定值 百分比 关键词
            7.指定径向渐变尺寸大小
                farthest-corner 椭圆跟最远的角相切
                closest-side 最近的边相切
                closest-corner 最近的角相切
                farthest-side 最远的边相切

            8.半径 
            */
            background-image: radial-gradient(
                red,yellow,blue
            );
            background-image: radial-gradient(
                red 10%,
                yellow 50%,
                blue 70%
            );
            background-image: radial-gradient(
                red ,
                40%,
                yellow 50%,
                blue
            );
            background-image: radial-gradient(
                red 10% 40%,
                yellow 50% 70%,
                blue
            );
            background-image: radial-gradient(
                ellipse,
                red 10% 40%,
                yellow 50% 70%,
                blue
            );
            background-image: radial-gradient(
                ellipse at 50px 50px,
                red 10% 40%,
                yellow 50% 70%,
                blue
            );
            background-image: radial-gradient(
                circle farthest-side at 50px 10px,
                red 10%,
                yellow 50%,
                blue
            );
            background-image: radial-gradient(
                circle 50px at 50px 10px,
                red 10%,
                yellow 50%,
                blue
            );
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>